<template>
    <div class="edit_article_main_con">
        <!-- 左文章编辑布局 -->
        <div class="left_article_con">
            <div class="edit_header">
                <input class="edit_title" type="text" :disabled="articleStatus" placeholder="请输入标题..."
                    v-model="articleTitle" />
                <el-switch :active-color="this.$store.state.theme.primary_color" v-model="articleStatus"
                    @change="articleStatusChange" active-text="阅读模式" inactive-text="编辑模式"></el-switch>
            </div>

            <div class="edit_content">
                <el-input type="textarea" v-show="!articleStatus" placeholder="请输入文章内容" v-model="articleContent">
                </el-input>
                <div v-highlight v-html="markdownHTML" class="markdown_html_view markdown-body" v-if="articleStatus">
                </div>
            </div>
            <div class="bottom_btn_con">
                <el-button type="primary" size="small" class="primary_deep3_color" @click="saveArticle(0)">发布
                </el-button>
                <el-button type="primary" size="small" class="primary_color" @click="saveArticle(1)">保存为草稿</el-button>
                <el-button type="primary" size="small" class="primary_thin3_color" @click="delArticle">删除</el-button>
            </div>
        </div>

        <!-- 右文章编辑布局 -->
        <div class="right_controll_con">
            <el-input type="textarea" size="small" placeholder="请输入文章简介" resize="none" class="brief_content"
                v-model="article.article_brief"></el-input>
            <el-select class="select_type" v-model="select_type" @change="articleTypeChange" placeholder="选择文章类型"
                size="small">
                <el-option v-for="item in types" :label="item.type_name" :value="item.type_name" :key="item.id">
                </el-option>
            </el-select>
            <div class="add_labels_con">
                <div class="labels_item_add">
                    <el-select v-model="select_label" placeholder="选择标签" size="small">
                        <el-option v-for="item in filter_labels" :label="item.label_name" :value="item.label_name"
                            :key="item.id"></el-option>
                    </el-select>
                    <el-button type="primary" size="small" plain @click="addLabel()">添加</el-button>
                </div>

                <div class="labels_item" v-for="item in add_labels" :key="item.id">
                    {{ item.label_name }}
                    <span class="el-icon-circle-close" @click="delLabel(item.label_name)"></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Message } from "element-ui"
import { marked } from 'marked'
import { $addArticle, $updateArticle, $delArticle } from '@/api/admin'
import { $getArticleByID } from '@/api/desk'
import 'github-markdown-css/github-markdown.css'

export default {
    name: "EditArticle",
    data() {
        return {
            id: this.$route.params.id,
            article: {
                article_brief: ""
            },
            types: this.$store.state.article.types,
            labels: this.$store.state.article.labels,
            articleContent: "", // 文章内容
            articleStatus: false, // 文章状态 阅读模式和编辑模式的切换
            articleTitle: "", // 文章标题
            select_type: "", // 所选文章类型
            select_label: "", // 所选的文章标签
            markdownHTML: "", // markdown转html内容
            add_labels: {} // 所添加进去的label
        }
    },
    computed: {
        filter_labels: function () {
            return this.labels.filter(item => {
                return item.belongs_type === this.select_type
            })
        }, // 根据类型过滤出所属的标签
    },
    created() {
        console.log("编辑文章", this.id)
        console.log("labels:", this.labels);
        console.log("article:", this.article);
        if (this.id !== "1")
            this.getArticleByID(this.id)
    },
    mounted() {
        this.$store.dispatch('setNowPath', this.$route)
    },
    methods: {
        // 通过id获取文章详细信息
        getArticleByID(id) {
            $getArticleByID({ id }).then(result => {
                console.log("getArticleByID:", result);
                this.article = result.data
                this.articleContent = result.data.content
                this.articleTitle = result.data.article_title
                this.select_type = result.data.type
                if (result.data.label !== "")
                    result.data.label.split("、").forEach(item => {
                        this.addLabel(item)
                    })
            })
        },

        // 文章类型改变
        articleStatusChange(e) {
            console.log("文章状态改变", e);
            if (e) {
                // 如果是切换成阅读模式，则转换markdown
                this.markdownHTML = marked(this.articleContent);
            }
        },

        // 删除
        delArticle() {
            $delArticle({ id: this.id }).then(result => {
                console.log("删除文章:", result);
                Message.success("删除文章成功")
                this.$router.push("/admin/article")
            })
        },

        // 校验格式是否正确
        schema(is_draft) {
            let data = {
                id: this.id,
                type: this.select_type,
                label: Object.keys(this.add_labels).join("、"),
                content: this.articleContent,
                articleBrief: this.article.article_brief,
                articleTitle: this.articleTitle,
                isDraft: is_draft
            }
            if (is_draft && !data.id) {
                Message.error("id为空")
                return
            }
            if (!data.type) {
                Message.error("请选择文章类型")
                return
            }
            if (!data.articleBrief) {
                Message.error("请输入文章简介")
                return
            }
            if (!data.content) {
                Message.error("请输入文章内容")
                return
            }
            if (!data.articleTitle) {
                Message.error("请输入文章标题")
                return
            }
            console.log(data);
            return data
        },

        // 保存文章 is_draft 0:发布 1:草稿
        saveArticle(is_draft) {
            let params = this.schema(is_draft)
            if (params) {
                // 如果有id信息，则是修改
                if (params.id && this.id !== "1") {
                    $updateArticle(params).then(res => {
                        console.log(res);
                        Message.success(res.msg)
                    })
                } else {
                    // 没有id则是新增
                    $addArticle(params).then(res => {
                        console.log(res);
                        Message.success(res.msg)
                        this.$route.push("/admin/article_manager/all_article")
                    })
                }
            }
        },



        // 文章类型发生了改变
        articleTypeChange() {
            // 先清空
            this.add_labels = {}
            this.select_label = ""
        },

        // 删除选择的label标签
        delLabel(key) {
            delete this.add_labels[key]

            this.$forceUpdate()
        },

        // 添加文章类型项
        addLabel(keyName) {
            let key = keyName || this.select_label
            let item = {}
            if (key === "") return
            console.log(key, 222);
            for (let i = 0; i < this.labels.length; i++) {
                if (this.labels[i].label_name === key) {
                    item = this.labels[i]
                    break;
                } else {
                    console.log(this.labels[i].label_name + "不等于" + key);
                }
            }
            console.log(item);

            if (this.add_labels[key]) {
                Message.error("该标签已添加")
                return
            }
            this.add_labels[key] = item
            this.$forceUpdate()
            console.log(this.add_labels)
        }
    }
}
</script>
<style lang="scss" scoped>
.edit_article_main_con {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;

    // 左文章编辑布局
    .left_article_con {
        margin-right: 10px;
        background-color: white;
        border-radius: 10px;
        padding: 8px;
        box-sizing: border-box;
        flex: 1 auto;
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 20px 0 rgb(212, 212, 212);

        .edit_header {
            width: 100%;
            min-height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .edit_title {
                color: #333;
                flex: 1 auto;
                font-size: 16px;
                border: none;
                outline: none;
            }
        }

        .edit_content {
            flex: 1 auto;
            display: inline-block;
            overflow-y: scroll;
            ::v-deep .el-textarea__inner,
            .el-textarea {
                height: 100% !important;
            }

            .markdown_html_view {
                width: auto;
                min-height: 100%;
                overflow-y: none;
                box-sizing: border-box;
                font-size: 15px;
                color: #444 !important;

            }

            ::v-deep {
                pre code.hljs {
                    display: block;
                    overflow-x: auto;
                }

                code.hljs {
                    padding: 0 5px
                }

                /*!
                Theme: GitHub Dark Dimmed
                Description: Dark dimmed theme as seen on github.com
                Author: github.com
                Maintainer: @Hirse
                Updated: 2021-05-15

                Colors taken from GitHub's CSS
                */
                .hljs {
                    color: #adbac7;
                    background: #22272e
                }

                .hljs-doctag,
                .hljs-keyword,
                .hljs-meta .hljs-keyword,
                .hljs-template-tag,
                .hljs-template-variable,
                .hljs-type,
                .hljs-variable.language_ {
                    color: #f47067
                }

                .hljs-title,
                .hljs-title.class_,
                .hljs-title.class_.inherited__,
                .hljs-title.function_ {
                    color: #dcbdfb
                }

                .hljs-attr,
                .hljs-attribute,
                .hljs-literal,
                .hljs-meta,
                .hljs-number,
                .hljs-operator,
                .hljs-selector-attr,
                .hljs-selector-class,
                .hljs-selector-id,
                .hljs-variable {
                    color: #6cb6ff
                }

                .hljs-meta .hljs-string,
                .hljs-regexp,
                .hljs-string {
                    color: #96d0ff
                }

                .hljs-built_in,
                .hljs-symbol {
                    color: #f69d50
                }

                .hljs-code,
                .hljs-comment,
                .hljs-formula {
                    color: #768390
                }

                .hljs-name,
                .hljs-quote,
                .hljs-selector-pseudo,
                .hljs-selector-tag {
                    color: #8ddb8c
                }

                .hljs-subst {
                    color: #adbac7
                }

                .hljs-section {
                    color: #316dca;
                    font-weight: 700
                }

                .hljs-bullet {
                    color: #eac55f
                }

                .hljs-emphasis {
                    color: #adbac7;
                    font-style: italic
                }

                .hljs-strong {
                    color: #adbac7;
                    font-weight: 700
                }

                .hljs-addition {
                    color: #b4f1b4;
                    background-color: #1b4721
                }

                .hljs-deletion {
                    color: #ffd8d3;
                    background-color: #78191b
                }
            }

            ::v-deep pre {
                display: flex;
                background-color: #22272e;

                .pre-numbering {
                    width: auto;
                    max-width: 30px;
                    flex: 0;

                    border-right: 1px solid #aaa;
                    padding-right: 4px;
                    color: #999;
                    text-align: right;
                }

                code {
                    flex: 1 auto;
                    padding: 0 0 0 4px;
                    box-sizing: border-box;
                    overflow-x: scroll;
                }
            }
        }

        .bottom_btn_con {
            width: 100%;
            height: 40px;
            min-height: 40px;
            max-height: 40px;
            display: flex;
            align-items: center;
        }
    }

    // 右文章编辑布局
    .right_controll_con {
        min-width: 200px;
        max-width: 200px;
        background-color: white;
        box-shadow: 0 0 20px 0 rgb(212, 212, 212);
        border-radius: 10px;
        padding: 8px;
        box-sizing: border-box;

        .title_font {
            color: #444;
        }

        .brief_content,
        ::v-deep .textarea,
        ::v-deep .el-textarea__inner {
            height: 200px;
            margin-bottom: 5px;
        }

        .select_type {
            margin-bottom: 5px;
        }

        .add_labels_con {
            width: 100%;
            padding: 3px;
            box-sizing: border-box;
            border-radius: 3px;
            border: 1px solid #eee;

            .labels_item {
                width: 100%;
                height: 30px;
                display: flex;
                align-items: center;
                border: 1px solid #eee;
                padding: 5px;
                box-sizing: border-box;
                justify-content: space-between;
                border-radius: 3px;
                margin-top: 3px;
                color: #444;

                .el-icon-circle-close {
                    font-size: 18px;
                    color: #aaa;
                }

                .el-icon-circle-close:hover {
                    color: #444;
                    cursor: pointer;
                }
            }

            .labels_item_add {
                width: 100%;
                border-radius: 3px;
                display: flex;
                justify-content: center;

                .el-select {
                    margin-right: 3px;
                }
            }
        }
    }
}
</style>